/* eslint-disable max-len */
/* eslint-disable no-multiple-empty-lines */
/* eslint-disable prettier/prettier */
import React, { PureComponent } from 'react';
import { View, StyleSheet, Text, Image } from "react-native";
import Strings from '../../i18n';
import style from '../../config/style';
import Res from '../../res';



class CleanPumpView extends PureComponent {
  render() {
    const { type } = this.props;
    return (

      <View style={style.container}>

        {/* type 0水泵堵转 1清洁水泵 */}
        {/*<View style={{ backgroundColor: '#FFFFFF', height: 50, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>*/}
          <Text style={style.bigTitle}>{type === 0 ? Strings.warning_card_title_pump_blocked : Strings.list_item_how_clean_pump_page_title}</Text>
        {/*</View>*/}


        {/* 如何清洁水泵？ */}
        <View style={{ backgroundColor: '#FFFFFF', height: 800, flexDirection: 'column' }}>
          <Text style={style.subTitle}>{type === 0 ? Strings.warning_detail_section_title_pump_blocked_0 : Strings.list_item_how_clean_pump_title}</Text>

          <Text style={style.contentText}>{ type === 0 ? Strings.warning_detail_content_pump_blocked0 : Strings.warning_detail_content_pump_clean0}</Text>
          <View style={style.imgBgView}>
            <Image style={style.imgView} resizeMode="cover" source={Res.cleanpumpA} />
          </View>
          <Text style={style.contentText}>{Strings.warning_detail_content_pump_filter_cotton1}</Text>
          <View style={style.imgBgView}>
            <Image style={style.imgView} resizeMode="cover" source={Res.cleanpumpB} />
          </View>
          <Text style={style.contentText}>{Strings.warning_detail_content_pump_filter_cotton2}</Text>
          <View style={style.imgBgView}>
            <Image style={style.imgView} resizeMode="cover" source={Res.cleanpumpC} />
          </View>
          <Text style={style.contentText}>{Strings.warning_detail_content_pump_filter_cotton3}</Text>
          <View style={style.imgBgView}>
            <Image style={style.imgView} resizeMode="cover" source={Res.cleanpumpD} />
          </View>
          <Text style={style.contentText}>{Strings.warning_detail_content_pump_filter_cotton4}</Text>
          <View style={style.imgBgView}>
            <Image style={style.imgView} resizeMode="cover" source={Res.cleanpumpE} />
          </View>

          <Text style={style.subTitle}>{Strings.warning_detail_title_pump_filter_cotton2}</Text>
          <Text style={style.contentText}>{Strings.warning_detail_content_pump_filter_cotton5}</Text>
          <View style={style.imgBgView}>
            <Image style={style.imgView} resizeMode="cover" source={Res.cleanpumpF} />
          </View>
          <Text style={style.contentText}>{Strings.warning_detail_content_pump_filter_cotton6}</Text>
          <View style={style.imgBgView}>
            <Image style={style.imgView} resizeMode="cover" source={Res.cleanpumpG} />
          </View>
          <Text style={style.contentText}>{Strings.warning_detail_content_pump_filter_cotton7}</Text>
        </View>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    height:1500,
  },
  title:{
    marginStart: 20,
    fontSize: 30,
    color: '#333333',
  },
  subtitle:{
    marginStart: 20,
    marginTop: 10,
    fontSize: 20,
    color: '#333333',
  },
  contents:{
    marginStart: 20,
    marginTop: 10,
    fontSize: 15,
    color: '#333333',
  },


});

export default CleanPumpView;
